<template>
  <div class="remaining">
    <backzj :mssg="aaa" />
    <div class="zweei"></div>
    <div class="rmain">
      <div class="gcont">
        <div class="ksdh">a</div>
        <div class="gleft">
          <div class="kfdjg">总账</div>
        </div>
        <div class="gleft">
          <div class="sadfa">ID：{{this.$store.getters.sidebar.userId}}</div>
        </div>
      </div>
      <div class="gcont1">
        <div class="gleft">
          <div>可用余额：{{qian.totalmoney}}元</div>
        </div>
        <div class="gleft" @click="tomxi">
          <div class="kdsfk">总账明细</div>
        </div>
      </div>
      <div class="gcont1">
        <div class="gleft">
          <div>可购物：{{qian.nomoney}}元</div>
        </div>
      </div>
      <div class="gcont1">
        <div>到期可提现：{{qian.djmoney}}元</div>
        <div class="kdsfk">提现规则</div>
      </div>
      <div class="gcont1 gcont2">
        <div class="gleft">
          <div>可提现：{{qian.money}}元</div>
        </div>
        <div class="kdsfk" @click="tixian">提现</div>
      </div>
      <div class="gcont gcont3">
        <div class="ksdh">a</div>
        <div class="gleft">
          <div class="kfdjg">拼团红包</div>
        </div>
        <div class="kdsfk">规则</div>
      </div>
      <div class="gcont gcont4">
        <div class="rleft">
          <div>累计已获得：{{hbaoa?hbaoa:0}}元</div>
          <div>待发放：{{daifa?daifa:0}}元</div>
        </div>
        <div class="kdsfk">红包明细</div>
      </div>
      <div class="gcont gcont3">
        <div class="ksdh">a</div>
        <div class="gleft">
          <div class="kfdjg">推广返佣</div>
        </div>
        <div class="kdsfk">规则</div>
      </div>
      <div class="gcont1 gcont2">
        <div class="rleft">
          <div>累计已获得：{{fanhb?fanhb:0}}元</div>
          <div>待发放：{{fdaifa?fdaifa:0}}元</div>
        </div>
        <div class="kdsfk">返佣明细</div>
      </div>
      <!-- 新增团长佣金 -->
      <div class="gcont gcont3">
        <div class="ksdh">a</div>
        <div class="gleft">
          <div class="kfdjg">团长佣金</div>
        </div>
        <div class="kdsfk">规则</div>
      </div>
      <div class="gcont1">
        <div class="rleft">
          <div>累计已获得：{{tzlj?tzlj:0}}元</div>
          <div>待发放：{{tzdf?tzdf:0}}元</div>
        </div>
        <div class="kdsfk">佣金明细</div>
      </div>
    </div>
    <!-- 提现 -->
    <div class="zhezhao" v-show="tiqian" @click="tixian"></div>
    <div :class="{'tmain':tiqian,'tmain1':!tiqian}">
      <div class="oifd">
        <div class="dsfs">a</div>
        <div class="tixian">提现</div>
        <div class="kdfg" @click="tixian">×</div>
        </div>
      <div class="txkk">
        <div class="sjds">
          <div class="asdlaf"><span class="ksajf">￥</span><input class="askaa" type='digit' v-model="timoney"/></div>
          <div class="dsfg">全部提现</div>
          </div>
        <div class="sdjkf">可提现金额：元</div>
        </div>
      <div class="kdsj">提现</div>
      </div>
    <!-- 提现 -->
  </div>
</template>

<script>
import backzj from "../components/backzj.vue";
import {getsj} from '../api/jjj'
export default {
  components: { backzj },
  data() {
    return {
      aaa: "我的钱包",
      tiqian:false,
      qian:'',
      // 红包累计获得
      hbaoa:'',
      // 待发放
      daifa:'',
      // 返佣累计
      fanhb:'',
      // 返佣待发放
      fdaifa:'',
      // 团长累计佣金
      tzlj:'',
      // 团长代发
      tzdf:'',
      // 提现金额
      timoney:0,
    };
  },
  methods: {
      tomxi(){
          this.$router.push('/walletdetail')
      },
      tixian(){
        this.tiqian=!this.tiqian
      }
  },
  created() {
    let userId=this.$store.getters.sidebar.userId
    let timestamp = Date.parse(new Date()) / 1000;
    // 抽奖开奖结果处理接口
    let qm="cls=product_spell&action=spellcancelorred" + "&appId=1" + "&timestamp=" + timestamp;
    getsj('aa','b',qm)
    .then(res=>{
      console.log(res)
    })
    .catch(err=>{
      console.log(err)
    })
    // 我的余额接口
    let yue="cls=main_moneyBalance&action=myBalance" + '&userId=' + userId + "&appId=1" + "&timestamp=" + timestamp + 'companyId=-7';
    getsj('aa','bb',yue)
    .then(res=>{
      this.qian=res.data.data.balance
      console.log(res.data.data)
    })
    .catch(err=>{
      console.log(err)
    })
    // 拼团红包接口
    let hbao="cls=redEnvelope_changePurse&action=TotalMoneyChangeRecord&userId=" + userId + "&appId=1" + "&timestamp=" + timestamp
    let qianw="&type=22&status=1,201"
    getsj('aa','bb',hbao,qianw)
    .then(res=>{
      this.hbaoa=res.data.data.dataList[0].totalmoney
      this.daifa=res.data.data.dataList[1].totalmoney
      console.log(res.data.data.dataList[0].totalmoney)
    })
    .catch(err=>{
      console.log(err)
    })
    // 推广返佣接口
    let fany="&type=23,28&status=1,201"
    getsj('aa','bb', hbao,fany)
    .then(res=>{
      this.fanhb=res.data.data.dataList[0].totalmoney
      this.fdaifa=res.data.data.dataList[1].totalmoney
      console.log(res.data.data)
    })
    .catch(err=>{
      console.log(err)
    })
    // 团长佣金接口
    let tuanz="&type=29&status=1,201"
    getsj('aa','bb', hbao,tuanz)
    .then(res=>{
      this.tzlj=res.data.data.dataList[0].totalmoney
      this.tzdf=res.data.data.dataList[1].totalmoney
      console.log(res.data.data)
    })
    .catch(err=>{
      console.log(err)
    })
  },
};
</script>

<style scoped>
.zweei{
    width: 100%;
    height: 44px;
}
.rmain{
  width: 94%;
  margin: 0 auto;
}
.gcont{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
  padding: 0 15px;
}
.ksdh{
  visibility: hidden;
}
.gleft{
  display: flex;
  align-items: center;
  flex-direction: column;
}
.kfdjg{
  font-weight: 700;
  font-size: 21px;
}
.kdsfk{
  border-bottom: 1px solid #3f8aec;
  color: #3f8aec;
}
.sadfa{
  color: #666;
  padding: 2px 10px;
  border-radius: 4px;
  border: 1px solid gainsboro;
}
.gcont1{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 15px;
}
.gcont2{
  border-bottom: 1px solid rgb(161, 158, 158);
  padding-bottom: 15px;
  margin-bottom: 0;
}
.gcont3{
  margin-top: 15px;
}
.gcont4{
  border-bottom: 1px solid rgb(161, 158, 158);
  padding-bottom: 8px;
  margin-bottom: 0;
}
.rleft{
  display: flex;
  flex-direction: column;
}
.rleft div{
  margin: 5px 0;
}
/* 提现 */
.tmain{
  width: 100%;
  background: white;
  border-radius: 15px 15px 0 0;
  z-index: 200;
  position: fixed;
  left: 0;
  bottom: 0;
  transition: bottom 0.5s;
}
.tmain1{
  width: 100%;
  background: white;
  border-radius: 15px 15px 0 0;
  z-index: 200;
  position: fixed;
  left: 0;
  bottom: -1000px;
  transition: bottom 0.5s;
}
.oifd{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px ;
}
.tixian{
  font-size: 20px;
  font-weight: 600;
}
.txkk{
  width: 90%;
  border: 1px solid gainsboro;
  border-radius:4px;
  display: flex;
  flex-direction: column;
  margin: 10px auto;
}
.sjds{
  width: 85%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid gainsboro;
  margin: 0 auto;
  margin-top: 30px;
  padding-bottom: 3px;
}
.ksajf{
  font-size: 25px;
  font-weight: 600;
}
.sdjkf{
  width: 85%;
  margin: 3px auto;
  font-size: 14px;
  color: #666;
  margin-bottom: 25px;
}
.asdlaf{
  width: 70%;
  display: flex;
  align-items: center;
}
.askaa{
  width: 80%;
  font-size: 18px;
  border: none;
  outline: none;
}
.kdfg{
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid rgb(182, 175, 175);
  color: rgb(153, 147, 147);
  font-size: 24px;
}
.dsfs{
  visibility: hidden;
}
.dsfg{
  border-bottom: 1px solid #3f8aec;
  color: #3f8aec;
}
.kdsj{
  width: 60%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: white;
  background: #3f8aec;
  margin: 25px auto;
  border-radius: 6px;
}
/* 提现 */
</style>